import { inject, onMounted } from "vue"

export const getRoad = () => {
    let map
    let road_source
    // 创建图层
    onMounted(() => {
        map = inject('$map')
        road_source = new ol.source.Vector({
            url: 'http://39.103.151.139:8000/gis/road_state',
            format: new ol.format.GeoJSON()
        })
        let road_layer = new ol.layer.Vector({
            source: road_source,
        })
        map.addLayer(road_layer)
    })
    const curRoad = () => {
        road_source.forEachFeature(feature => {
            if (feature.get('flow') >= 1600) {
                feature.setStyle(style('red'))
            } else if (feature.get('flow') >= 1200 && feature.get('flow') < 1600) {
                feature.setStyle(style('orange'))
            } else {
                feature.setStyle(style('green'))
            }
        })
    }

    const roadVideo = () => {
        const style = new ol.style.Style({
            image: new ol.style.Icon({
                src: '/src/assets/image/监控.png',
                scale: 0.2
            })
        })
        // 添加视频监控
        const video_source = new ol.source.Vector({
            url: 'http://39.103.151.139:8000/gis/police',
            format: new ol.format.GeoJSON()
        })
        const video_layer = new ol.layer.Vector({
            source: video_source,
            style,
        })
        map.addLayer(video_layer)
    }

    function style(color) {
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color,
                width: 5
            })
        })
    }


    return {
        curRoad, roadVideo,
    }
}